<template>
    <div class="rightKs">
        <ThemeTitle :title="title"/>
        <!-- 实时监测预警 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">实时监测预警</div>
            </div>
        </div>  
        <!-- 实时预警 -->
        <div class="realTime">
            <div class="kuangshan">
                <div class="kuangshanL">
                    矿山
                </div>
                <div class="kuangshanR">
                    <div v-for="(item,index) of kuangshanList" :key="index">
                        <div>{{item.name}}</div>
                        <div>{{item.value}}</div>
                    </div>
                </div>
            </div>
            <div class="weikuang">
                <div class="weikuangL">
                    尾矿
                </div>
                <div class="weikuangR">
                    <div v-for="(item,index) of weikuangList" :key="index">
                        <div>{{item.name}}</div>
                        <div>{{item.value}}</div>
                    </div>
                </div>
            </div>
            <div class="weikuang">
                <div class="weikuangL">
                    尾矿
                </div>
                <div class="weikuangR">
                    <div v-for="(item,index) of weikuangList" :key="index">
                        <div>{{item.name}}</div>
                        <div>{{item.value}}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 动态监管数据分析 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">动态监管数据分析</div>
            </div>
            <!-- tabs -->
            <div class="timeTabs">
                <div v-for="(item,index) of timeList" :key="index">
                    {{item}}
                </div>
            </div>
        </div>
        <!-- 动态监管数据分析chart -->
        <div id="dataAnyChart"></div>

        <!-- 月度企业报警排行 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">月度企业报警排行</div>
            </div>
        </div>

        <!-- 月度企业报警排行表格 -->
        <div class="wellTable">
            <table border="1">
                <tr>
                    <th>排行</th>
                    <th>企业名称</th>
                    <th>区域</th>
                    <th>报警总数</th>
                    <th>报警处置率</th>
                </tr>
                <tr v-for="(item,index) in tableList" :key="index">
                    <td v-for="(item1,index1) in item" :key="index1">
                        {{item1}}
                    </td>
                </tr>
            </table>
        </div>

        <!-- 企业风险趋势分析 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">企业风险趋势分析</div>
            </div>
            <!-- tabs -->
            <div class="timeTabs">
                <div v-for="(item,index) of qiyeList" :key="index">
                    {{item}}
                </div>
            </div>
        </div>
        <!-- 风险趋势预测列表 -->
        <div id="fengxianChart">
            
        </div>

        
    </div>
</template>

<script>
    import 'echarts-liquidfill/src/liquidFill.js';
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            const title =  provide("title", "自然地理"); 
            const {ctx} = getCurrentInstance();
            const numList = [
                2,5,1,3,8,0
            ]
            const tableList = [
                ["1",'海南矿业','三沙市','34','34'],
                ["1",'海南矿业','三沙市','34','34'],
                ["1",'海南矿业','三沙市','34','34'],
                ["1",'海南矿业','三沙市','34','34']
               
            ]
            const kuangshanList = [
                {name:'温度',value:'5/91'},
                {name:'co',value:'5/91'},
                {name:'开停',value:'5/91'}
            ]
            const weikuangList = [
                {name:'库水位',value:'5/91'},
                {name:'降雨量',value:'5/91'},
                {name:'干滩长度',value:'5/91'}
            ]
            
            const timeList = ['物联设备','视频设备','全部']
            const qiyeList = ['危化','矿山']
            let optionValue =  '';
           
            function drawThreeChart(){
                var dom = document.getElementById("dataAnyChart");
                var myChart = ctx.$echarts.init(dom);
                var option = {
                    series: [{
                        type: 'liquidFill',
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: [0.6, 0.5, 0.4, 0.3],
                        radius: '80%',
                        // 水球颜色
                        color: ['#49d088', '#38b470', '#2aaf66'],
                        center: ['20%', '50%'],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: '#13FDCE',
                            },
                        },
                        label: {
                            normal: {
                                // textStyle: {
                                    color: 'red',
                                    insideColor: 'rgba(73,252,176,1)',
                                    fontSize: 20
                                // }
                            }
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: 'rgba(4,24,74,0.8)',
                            // borderWidth: 5,
                            // borderColor: 'red',
                        }
                    },{
                        type: 'liquidFill',
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: [0.3, 0.2, 0.1, 0.05],
                        radius: '80%',
                        // 水球颜色
                        color: ['rgba(151,119,255,1)', 'rgba(151,119,255,1)', 'rgba(151,119,255,1)'],
                        center: ['50%', '50%'],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: 'rgba(151,119,255,1)',
                            },
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: 'red',
                                    insideColor: 'rgba(73,252,176,1)',
                                    fontSize: 20
                                }
                            }
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: 'rgba(4,24,74,0.8)',
                            // borderWidth: 5,
                            // borderColor: 'red',
                        }
                    },{
                        type: 'liquidFill',
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: [0.1, 0.05,0.25],
                        radius: '80%',
                        // 水球颜色
                        color: ['#FFBF11', '#F4B30E', '#EACE36'],
                        center: ['80%', '50%'],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: '#FFBF11',
                            },
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: 'red',
                                    insideColor: 'rgba(73,252,176,1)',
                                    fontSize: 20
                                }
                            }
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: 'rgba(4,24,74,0.8)',
                            // borderWidth: 5,
                            // borderColor: 'red',
                        }
                    }]
                };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawFxChart(){
                var dom = document.getElementById("fengxianChart");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: '#57617B'
                            }
                        }
                    },
                    legend: {
                        icon: 'rect',
                        itemWidth: 14,
                        itemHeight: 5,
                        itemGap: 13,
                        data: ['移动', '电信', '联通'],
                        right: '4%',
                        textStyle: {
                            fontSize: 12,
                            color: '#F1F1F3'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '-5%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }, {
                        axisPointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#57617B'
                            }
                        },
                        axisTick: {
                            show: false
                        },

                        position: 'bottom',
                        offset: 20,
                        data: ['', '', '', '', '', '', '', '', '', '', {
                            value: '周六',
                            textStyle: {
                                align: 'left'
                            }
                        }, '周日']
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '单位（%）',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 14,
                                 color: '#fff'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#57617B'
                            }
                        }
                    }],
                    series: [ {
                        name: '危化',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: ctx.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 136, 212, 0.3)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(0, 136, 212, 0)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgb(0,136,212)',
                                borderColor: 'rgba(0,136,212,0.2)',
                                borderWidth: 12

                            }
                        },
                        data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
                    }]
                };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            onMounted(()=>{
                drawThreeChart()
                drawFxChart()
            })
            return {
                kuangshanList,
                weikuangList,
                timeList,
                tableList,
                qiyeList,
                title
            }
        }
    }
</script>
<style >
    table,table tr th, table tr td { border:1px solid #155e75 }
</style>
<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
    .rightKs
        .realTime
            margin-top:vh(10)
            width:100%
            height:vh(220)
            display:flex
            justify-content:space-between
            flex-direction:column 
            .kuangshan
                display:flex
                justify-content:space-between
                .kuangshanL
                    width:vw(69)
                    height:vh(68)
                    line-height:vh(68)
                    text-align:center
                    background: url('/data/images/hngk/rece.png') no-repeat
                    background-size: 100% 100%
                .kuangshanR
                    width:vw(292)
                    height:vh(62)
                    display:flex
                    justify-content:space-around
                    align-items:center
                    div
                        display:flex
                        justify-content:space-around
                        flex-direction:column 
                        height:vh(62)
                        div:nth-child(1)
                            text-align:center
                            color:rgba(173,248,255,1)
                            font-size:vw(12)
                        div:nth-child(2)
                            width:vw(55)
                            height:vh(23)
                            line-height:vh(23)
                            text-align:center
                            background: url('/data/images/hngk/kuangshan.png') no-repeat
                            background-size: 100% 100%
            .weikuang
                display:flex
                justify-content:space-between
                .weikuangL
                    width:vw(69)
                    height:vh(68)
                    line-height:vh(68)
                    text-align:center
                    background: url('/data/images/hngk/rece.png') no-repeat
                    background-size: 100% 100%
                .weikuangR
                    width:vw(292)
                    height:vh(62)
                    display:flex
                    justify-content:space-around
                    align-items:center
                    div
                        display:flex
                        justify-content:space-around
                        flex-direction:column 
                        height:vh(62)
                        div:nth-child(1)
                            text-align:center
                            color:rgba(173,248,255,1)
                            font-size:vw(12)
                        div:nth-child(2)
                            text-align:center
                            width:vw(55)
                            height:vh(23)
                            line-height:vh(23)
                            background: url('/data/images/hngk/kuangshan.png') no-repeat
                            background-size: 100% 100%
        #callPoliceChart
            width:vw(365)
            height:vh(130)
        .wellTable  
            width:100%
            height:vh(200)
            table
                width: 100%
                height: vh(200)
                line-height: vh(40)
                text-align: center
                border-color: #155e75
                border-collapse: collapse
                tr:nth-child(1)
                    height:vh(25)
                    th
                        color:rgba(30,212,233,1)
                tr
                    color:#fff

        .fengxianList
            width:100%
            height:vh(120)
            div
                width:100%
                height:vh(30)
                line-height:vh(30)
                border-bottom:1px solid #155e75
                text-indent:vw(20)
        .videoQuery
            width:100%
            height:vh(150)
            display:flex
            justify-content:space-between
            align-items:flex-start
            .videoList
                flex:1
                height:vh(150)
                div
                    width:100%
                    height:vh(30)
                    line-height:vh(30)
                    border-bottom:1px solid #155e75
                    text-indent:vw(20)
                div:nth-child(1)
                    background: url('/data/images/hngk/video.png') no-repeat
                    background-size: 100% 100%
            .video
                flex:1
                margin-left:vw(10)
                img
                    width:vw(182)
                    height:vh(119)
                    border:1px solid #ddd
        .geoIntro
            width:vw(365)
            margin-top:vh(20)
            display:flex
            justify-content:space-between
            .geoIntroTitle
                margin-bottom:vh(13)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .geoIntroWord
                    color:#00EAFF
                    font-size:vw(16)
            .timeTabs
                float:right
                height:vh(22)
                display:flex
                div
                    width:vw(55)
                    height:vh(22)
                    line-height:vh(22)
                    text-align:center
                    background: #012332
                    border: 1px solid #1398cf
                    cursor:pointer
                .active
                    border:1px solid #ddd
                    background:#023850
        #dataAnyChart
            width:100%
            height:vh(120)
        #fengxianChart
            margin-top:vh(10)
            width:100%
            height:vh(180)
</style>